{% load i18n %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="user-scalable=no,width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">
    <meta name="HandheldFriendly" content="true">
    <link rel="shortcut icon" href="/favicon.ico">
    <link rel="stylesheet" href="/static/lib/font-awesome-4.7.0/css/font-awesome.min.css">
    <!--添加开始  -->
    <meta name="renderer" content="webkit">
    <link rel="apple-touch-icon" href="/resources/img/binance_icon.png">
    <!--添加结束-->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link href="/static/app/css/sm.css" rel="stylesheet" type="text/css">
    <link href="/static/app/css/common.css" rel="stylesheet" type="text/css">
    <link href="/static/app/css/index.css" rel="stylesheet" type="text/css">
    <script src="/static/app/js/jquery-2.2.3.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    <script src="/static/app/js/layer/layer.js"></script>
	<script>var page='market';</script>
    <!-- add for app -->
    <script src="/static/app/js/common/common_func.js"></script>
    <script src="/static/app/js/component.js"></script>
    {% include 'show/common_define.html' %}
    <script type="text/javascript" src="{%url 'javascript-catalog' 'btc.js'%}"></script>
    <script src="/static/lib/csrf.js"></script>
    <!-- add for app end -->
    <title>{% trans '市场' %}</title>
    <style>
        .collect{color:#ceb90b}
    </style>
</head>
<body>

<div id="market-app" class="page-container">
    <div class="page-content">
        <div class="page-view">
            <div class="market-list">
                <!-- <div style="text-align: center; padding: 0.5rem">
                    <div class="f-fl" style="width: 33.33% ; height: 2rem;">
                            <div class="search" >
                                <img src="/static/app/images/bigmirror.png"/>
                                <input placeholder="搜索" style="caret-color: #F0B90B; width: 7rem; font-size: 0.7rem"/>
                            </div>
                        </div>
                        <div class="f-fl" style="width: 33.33%; height: 2rem; text-align: center">
                            <span>市场</span>
                        </div>
                        <div class="f-fl" style="width: 33.33%; height: 2rem;"></div>
                </div> -->
                <div>
                    <div class="search">
                        <div class="f-fl" >
                            <img src="/static/app/images/bigmirror.png"/>
                            <input placeholder="搜索" style="caret-color: #F0B90B; width: 7rem; font-size: 0.7rem"/>
                        </div>
                        <div>
                            <span>市场</span>
                        </div>
                    </div>

                </div>
                <!-- <div class="search" >
                    <img src="/static/app/images/bigmirror.png"/>
                    <input style="border: 1px solid #fff; border-radius: 10px" placeholder="搜索" style="caret-color: #F0B90B; width: 100%"/>
                </div> -->
                <!-- <div class="search">
                    <img src="/static/app/images/bigmirror.png"/>
                    <input placeholder="搜索" style="caret-color: #F0B90B; width: 9rem; font-size: 0.7rem"/>
                </div> -->
                <div class="btn-tab">
                    <span class="button" v-for="item in mdata" v-bind:class="{'active':select_market==item.m_name}"  v-on:click="sel_market(item.m_name)">{!item.m_name!} </span>
                </div>
                <div class="content" id="products" style="margin-top: 2rem">
                    <table class="table">
                        <colgroup style="width: 33.33%"></colgroup>
                        <colgroup style="width: 33.33%"></colgroup>
                        <colgroup style="width: 33.33%"></colgroup>
                        <thead>


                        </thead>
                        <tbody>
                        <tr class="list-title">
                            <th>收藏</th>
                            <th class="f-left">
                                <span v-bind:class="{curcor:sort=='n'}" v-on:click="change_sort('n')">名称 </span><span v-if="sort=='n'" class="curcor"><i class="vl-i font"  v-bind:class="{'font-downdie':order=='asc','font-topzhang':order=='desc'}"></i></span>
                               <!--
                                /
                                <span v-bind:class="{curcor:sort=='v'}" v-on:click="change_sort('v')"> 成交量</span><span v-if="sort=='v'" class="curcor"><i class="vl-i font" v-bind:class="{'font-downdie':order=='asc','font-topzhang':order=='desc'}"></i></span></th>
                                -->
                            <th class="f-left" v-bind:class="{curcor:sort=='p'}" v-on:click="change_sort('p')">最新价<span v-if="sort=='p'" class="curcor"><i class="vl-i font"  v-bind:class="{'font-downdie':order=='asc','font-topzhang':order=='desc'}"></i></span></th>
                            <th class="f-right p-r" v-bind:class="{curcor:sort=='h'}" v-on:click="change_sort('h')">24h涨跌<span v-if="sort=='h'" class="curcor"><i class="vl-i font"  v-bind:class="{'font-downdie':order=='asc','font-topzhang':order=='desc'}"></i></span></th>

                        </tr>
                        <tr class="market-li" v-for="(item, index) in now_data_list" >

                            <!-- <td v-if="item.is_collect" style="text-align: center;"><img class="col_start" :id=`mun_${index}` @click.stop="to_collect(index)" style="margin-top: 0.6rem; width: 1.2rem; height: 1.2rem;" src="/static/app/images/xing2.png" alt=""></td> -->
                            <!-- <td v-else style="text-align: center;"><img class="col_start" :id=`mun_${index}` @click.stop="to_collect(index)" style="margin-top: 0.6rem; width: 1.2rem; height: 1.2rem;" src="/static/app/images/xing.png" alt=""></td> -->
                            <td style="text-align: center;"><i style="font-size: 1.5rem" class="col_star fa fa-star-o" :class="{collect: item.is_collect}" :id=`mun_${index}` @click.stop="to_collect(index)"></i></td>
                            <td v-on:click="on_click_url(item)">
                                <p><span class="firasset">{!item.up_coin_type!}</span><span class="secasset">/ {!item.up_use_coin_type!}</span></p>
                                <p class="volue">成交量 <span>{!item.volume!}</span></p>
                            </td>
                            <td v-on:click="on_click_url(item)"><p class="firasset">{!item.curr!}</p><p class="secasset"><span>￥ {!item.curr!}</span></p></td>
                            <td v-on:click="on_click_url(item)" class="f-right p-r"><span class="Chg"  v-bind:class="[item.percent>0 ?'rise':'fall']">{!item.percent!}</span></td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
	<div class="app_menu">
		<my-menu></my-menu>
	</div>
</div>

<script src="/static/app/js/market.js"></script>
</body>
</html>
<script>
var market_pairs = [
    {"id":1,"m_name":"{% trans '自选' %}", 'key':'self'},
    {"id":2,"m_name":"BITCNY", 'key': 'bitcny'},
    {"id":3,"m_name":"BTC", 'key' : 'btc'},
    {"id":4,"m_name":"ETH", 'key' : 'eth'},
    {"id":5,"m_name":"USDT", 'key' : 'usdt'}
    ];

$(document).ready(function() {
    //var market_list = temp_market_list
    //vue_init(market_pairs, market_list);
    get_curr_market()
})
function get_curr_market() {
    $.get("/btc/get_curr_market", {}, function(jsonobj){
        var data = jsonobj
        //console.log(data)
        create_market_data_fotmat(data)
    })
}
// 构造成需要的样子
// 2次遍历
function create_market_data_fotmat(data){

    var market_list = {}
    for (i = 0; i < market_pairs.length; i++) {
        // todo 自选todo添加
        var pack_data = []
        var info = market_pairs[i]
        var use_coin_type = info.m_name
        for ( ii = 0; ii < data.length; ii++)
        {
            var item = data[ii]
            //console.log('packdata', item.use_coin_type, info.key)
            if (item.use_coin_type == info.key)
            {
                // console.log('packdata', item)
                var open = item.open
                var curr = item.curr
                var diff = (curr - open) / 100
                var percent = diff.toFixed(2)
                item['percent'] = percent
                item['up_coin_type'] = item.coin_type.toUpperCase()
                item['up_use_coin_type'] = item.use_coin_type.toUpperCase()
                pack_data.push(item)
            }
        }
        market_list[info.m_name] = pack_data
    }
    //console.log("===========", market_list)
    vue_init(market_pairs, market_list);
}
</script>
<script id="testbox" type="text/html">
    <div id="dataList">
        <div class="search">
            <img src="/static/app/images/bigmirror.png"/>
            <input placeholder="搜索" style="caret-color: #F0B90B;"/>
            <span onclick="layer.closeAll();">取消</span>
        </div>
        <ul class="allsymbols">
            <li v-for="item in g_markets" v-on:click="select_coin(item.coin_type)">
                <p>
                    <img :src="item.img"/>
                    {!item.name_upper!}
                    <span>({!item.full_name!})</span>
                </p>
            </li>
        </ul>
        </div>
    </script>
